<template>
  <view>
    <view class="unction_list">
      <block v-for="item in protocolList" :key="item.id">
        <view class="unction_btn" @click="goToPage(item.url, item.type)">
          <text class="font_div">{{item.type}}</text>
          <view class="arrow"> </view>
        </view>
      </block>
      
      <!-- <view class="unction_btn">
        <text class="font_div">隐私协议</text>
        <view class="arrow"> </view>
      </view>
      <view class="unction_btn">
        <text class="font_div">招商代理合作协议</text>
        <view class="arrow"> </view>
      </view>
      <view class="unction_btn">
        <text class="font_div">商家服务协议</text>
        <view class="arrow"> </view>
      </view> -->
    </view>
  </view>
</template>

<script>
import { getUserProtocolListApi } from '@/service/user/user.service.js'
export default {
  data () {
    return {
      protocolList: []
    }
  },
  methods: {
    goToPage (protocolUrl, name) {
      uni.navigateTo({
        url: '/pages/user/protocolInfo?name=' + name + '&protocolUrl=' + protocolUrl
      })
    },
    getUserProtocolList () {
      getUserProtocolListApi({}, res => {
        if (res.status == 0) {
          this.protocolList = res.data;
        }
      }, null, {showErrorMsg: true});
    }
  },
  onShow() {
    this.getUserProtocolList();
  }
}
</script>

<style lang="scss" scoped>
  .font_div{
    font-size:28rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
  }
  .unction_list{
    width: 100%;
    background:#FFF;
  }
  /* 列表 */
  .unction_btn {
    width: 718.8rpx;
    height: 97rpx;
    line-height: 97rpx;
    border-bottom: 2rpx solid #E1E1E1;
    opcity: 0.5;
    position: relative;
    margin-left:31rpx;
    &:last-child {
      border-bottom: none;
    }
  }
  .unction_btn>text {
   
    position: absolute;
    left: 8rpx;
  }
  
  .unction_btn .arrow{
    position: absolute;
    right: 29rpx;
    top: 40rpx;
  }
  /* 三角形 */
  .arrow {
    border-right: 3rpx solid #8A8A8A;
    border-top: 3rpx solid #8A8A8A;
    height: 18rpx;
    width: 18rpx;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/
    border-left: 2rpx solid transparent;
    border-bottom: 2rpx solid transparent;
  }
</style>
